<style scoped>
  .layout-con {
    height: 100%;
    width: 100%;
  }

  .menu-item span {
    display: inline-block;
    overflow: hidden;
    width: 69px;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: bottom;
    transition: width .2s ease .2s;
  }

  .menu-item i {
    transform: translateX(0px);
    transition: font-size .2s ease, transform .2s ease;
    vertical-align: middle;
    font-size: 16px;
  }

  .collapsed-menu span {
    width: 0px;
    transition: width .2s ease;
  }

  .collapsed-menu i {
    transform: translateX(5px);
    transition: font-size .2s ease .2s, transform .2s ease .2s;
    vertical-align: middle;
    font-size: 22px;
  }

  .title-top-center {
    text-align: center;

  }

  .title-top-right {
    float: right
  }

  .btn_tools {
    padding: 6px 10px 6px 10px;
    background: #eee;
    border-radius: 20px;
  }

  .ivu-cell-extra {
    color: #ed4014;
  }
</style>

<template>
  <Row type="flex" justify="center" align="top" class="code-row-bg">
    <Col id="staff1" span="1"
         :style="phoneStyle?{background:'#ffffff',height:'50px',borderTop: '1px solid #cccccc'}:{background:'#3F88D5',height:'100vh'}">
      <NavLeft :selected="2" :avatar="avatar"></NavLeft>
    </Col>
    <Col id="staff4" span="4">
      <NavMiddle :itemList="itemList"></NavMiddle>
    </Col>
    <Col id="staffDetail_phone" span="19" style="background:#f5f7f9;height:100vh;">
      <Layout>
        <Content :style="phoneStyle?{padding: '0'}:{padding: '0 16px 16px'}">
          <Breadcrumb id="topTitle" :style="{margin: '16px 0'}">
            <Row type="flex" justify="space-between">
              <Col span="8">
                <span style="font-size: 16px;color: rgb(70, 76, 91);line-height: 36px;cursor: pointer" @click="goBack"><Icon
                    type="ios-arrow-back"/>返回</span>
              </Col>
              <Col span="6" class="title-top-center"
                   style="font-size: 16px; font-weight: bold; color: rgb(70, 76, 91);text-align:center;line-height: 36px">
                {{title}}
              </Col>
              <Col id="menuCol" span="10" style="text-align: right;padding-top: 5px;box-sizing: border-box">
                <DatePicker :size="phoneStyle?'small':'large'" type="date" placeholder="选择日期" :editable="false"
                            :clearable="false"
                            :value="chooseDate" @on-change="dateChange"></DatePicker>
              </Col>
            </Row>
          </Breadcrumb>
          <!-- 指标板块 -->
          <Card class="quota">
            <div class="titleBackH gradualYellow">
              <span class="tb_top">{{title}}</span>
              <span class="tb_bottom">
                <span class="tbb_left">-- --</span>
                <span class="tbb_right">目标** **</span>
              </span>
            </div>
            <div class="contentH_detail">
              <!-- 标题 -->
              <div class="conList" v-if="!phoneStyle">
                <div class="con_con">
                  <div class="con_one ccTitle">项目</div>
                  <div class="con_two ccTitle">目标值</div>
                  <div class="con_three ccTitle">当前值</div>
                  <div class="con_four ccTitle">状态</div>
                </div>
              </div>
              <div class="conList" v-for="(item,index) in valueList" :key="index" v-if="!phoneStyle">
                <div class="con_title">
                  <div class="title">{{item.name}}</div>
                  <!--<div class="target">{{item.target_value}}</div>-->
                  <div class="target">****</div>
                  <div :class="item.confirm_value == '未出结果'?'nowValue nowValueNull':'nowValue'"
                       v-if="$route.query.statis_id == 3">****
                  </div>
                  <div :class="item.confirm_value == '未出结果'?'nowValue nowValueNull':'nowValue'" v-else>
                    {{item.confirm_value}}
                  </div>
                </div>
                <div class="con_con" v-for="(val,ind) in item.items" @click="changeEntry(index,ind)">
                  <div class="con_one ccText1">{{val.title}}</div>
                  <!--<div class="con_two ccText2">{{val.target_value}}{{val.company}}</div>-->
                  <div class="con_two ccText2">****</div>
                  <div :class="val.confirm_value == ''?'con_three ccText3 ccText3Null':'con_three ccText3'"
                       v-if="val.datetype == 'bool'">{{val.confirm_value == ''?'未出结果': val.confirm_value == 1?'OK':'NG'
                    }}
                  </div>
                  <div :class="val.confirm_value == ''?'con_three ccText3 ccText3Null':'con_three ccText3'" v-else>
                    {{val.confirm_value == ''?'未出结果': val.confirm_value}}
                  </div>
                  <div class="con_four ccText4" v-if="val.status == '待确认'">待确认
                    <Icon type="ios-arrow-forward"/>
                  </div>
                  <div class="con_four ccText4 textOK" v-if="val.status == 'OK'">OK
                    <Icon type="ios-arrow-forward"/>
                  </div>
                  <div class="con_four ccText4" v-if="val.status == 'NG'">
                    <div class="ng">NG</div>
                    <Icon type="ios-arrow-forward"/>
                  </div>
                  <div class="con_four ccText4" v-if="val.status == '等待数据'">等待数据
                    <Icon type="ios-arrow-forward"/>
                  </div>
                </div>
              </div>
              <div class="conList_Phone" v-for="(item,index) in valueList" v-else>
                <div class="cp_title">
                  <div class="title">{{item.name}}</div>
                  <!--<div class="target">{{item.target_value}}</div>-->
                  <div class="target">****</div>
                  <div :class="item.confirm_value == '未出结果'?'nowValue nowValueNull':'nowValue'"
                       v-if="$route.query.statis_id == 3">****
                  </div>
                  <div :class="item.confirm_value == '未出结果'?'nowValue nowValueNull':'nowValue'" v-else>
                    {{item.confirm_value}}
                  </div>
                </div>
                <div class="cp_con" v-for="(val,ind) in item.items" @click="changeEntry(index,ind)">
                  <div class="cpc_top">
                    <span class="cpct_title">{{val.title}}</span>
                    <div class="cpct_status" v-if="val.status == '待确认'">待确认</div>
                    <div class="cpct_status textOK" v-if="val.status == 'OK'">OK</div>
                    <div class="cpct_status" v-if="val.status == 'NG'">
                      <div class="ng">NG</div>
                    </div>
                    <div class="cpct_status" v-if="val.status == '等待数据'">等待数据</div>
                  </div>
                  <div class="cpc_bottom">
                    <!--<div class="con_two ccText2">{{val.target_value}}{{val.company}}</div>-->
                    <div class="cpcb_labels"><span class="cl_title">目标值</span>****</div>
                    <div :class="val.confirm_value == ''?'cpcb_labels cpcb_valueNull':'cpcb_labels cpcb_valueHave'"
                         v-if="val.datetype == 'bool'"><span class="cl_title">当前值</span>{{val.confirm_value ==
                      ''?'未出结果': val.confirm_value == 1?'OK':'NG' }}
                    </div>
                    <div :class="val.confirm_value == ''?'cpcb_labels cpcb_valueNull':'cpcb_labels cpcb_valueHave'"
                         v-else><span class="cl_title">当前值</span>{{val.confirm_value == ''?'未出结果': val.confirm_value}}
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </Card>
          <entry v-if="entryShow" :entryData="entryData" @saveEntry="saveEntry"></entry>
        </Content>
      </Layout>
    </Col>
  </Row>
</template>

<script>
  import cookie from 'js-cookie';
  import entry from '../../assembly/entryForStaff'
  import NavLeft from '@/components/NavLeft';
  import NavMiddle from '@/components/NavMiddle';

  export default {
    name: "costRecord",
    data() {
      return {
        isCollapsed: false,
        itemList: [],
        itemInfo: [],
        tjList: [],
        unit_id: "",
        chooseQS: 0,
        valueList: [],
        entryShow: false,
        entryData: {},
        title: '',
        avatar: '',
        isAdmin: cookie.get('isAdmin'),
        chooseDate: cookie.get('chooseDate'),
        phoneStyle: false,
      };
    },
    components: {NavLeft: NavLeft, NavMiddle: NavMiddle, entry: entry},
    methods: {
      getData() {
        var uid = cookie.get('uid');
        var token = cookie.get('token');
        if (!uid || !token) {
          //this.$Message.warning('请登录');
          //store.dispatch('setLoginStatus', 0)
          //window.location.reload()
        }
        this.$Loading.start();
        var str = {type: 'login', loginType: cookie.get('loginType')};
        var strdata = this.$twjsdes.enstr(str);
        this.$http.post(this.$API_URL + '/item/home', {alldata: strdata.alldata}).then((response) => {
          this.$Loading.finish();
          var res = this.$twjsdes.decrypt(response.data.alldata);
          if (res.status == -1 && res.data.backurl) {
            this.$Modal.warning({
              title: '提示',
              content: '请在企业微信授权登录后使用',
              onOk: () => {
                if (this.$twjsdes.isWechat() === true) {
                  window.location.href = res.data.backurl_oauth2
                } else {
                  window.location.href = res.data.backurl
                }
              }
            });

          } else if (res.status != 1) {
            this.$Message.error(res.msg);
          } else {
            this.itemList = res.data.list;
            this.itemInfo = res.data;
            localStorage.setItem('middleId', res.data.unit_id)
            this.avatar = res.data.avatar;
          }
          // console.log(res.data.brands);
        }).catch(function (error) {
          this.$Modal.error({
            title: '提示',
            content: '网络连接错误，请检查后重试'
          });
          //console.log(error);
        });
      },
      getInfo() {
        let self = this
        var uid = cookie.get('uid');
        var str = {
          statis_id: self.$route.query.statis_id,
          unit_id: self.$route.query.id,
          uid: uid,
          ymd: self.chooseDate,
          loginType: cookie.get('loginType')
        };
        var strdata = this.$twjsdes.enstr(str);
        self.$http.post(self.$API_URL + '/info/record', {alldata: strdata.alldata}).then(ress => {
          var res = this.$twjsdes.decrypt(ress.data.alldata);
          console.log(res)
          for (let i = 0; i < res.data.list.length; i++) {
            for (let x = 0; x < res.data.list[i].items.length; x++) {
              if (res.data.list[i].items[x].statis_info_id == 51) {
                res.data.list[i].items.splice(x, 1)
              }
              if (res.data.list[i].items[x].statis_info_id == 53) {
                res.data.list[i].items.splice(x, 1)
              }
            }
          }
          self.valueList = res.data.list
        })
      },
      changeEntry(index, ind) {
        let self = this
        let list = []
        for (let i = 0; i < self.valueList.length; i++) {
          for (let x = 0; x < self.valueList[i].items.length; x++) {
            list.push(self.valueList[i].items[x])
          }
        }
        let chooseIndex = 0
        if (index <= 0) {
          chooseIndex = ind
        } else {
          let num = 0
          for (let n = 0; n < index; n++) {
            num += self.valueList[n].items.length
          }
          chooseIndex = num + ind
        }
        self.entryData = {
          chooseIndex: chooseIndex,
          chooseDate: self.chooseDate,
          dataList: list,
        }
        self.entryShow = true
      },
      publicInfo() {
        let self = this
        this.$Loading.start();
        var str = {
          uid: cookie.get('uid'),
          unit_id: self.$route.query.id,
          ymd: self.chooseDate,
          loginType: cookie.get('loginType')
        };
        var strdata = this.$twjsdes.enstr(str);
        this.$http.post(this.$API_URL + '/info/reporttj', {alldata: strdata.alldata}).then((response) => {
          this.$Loading.finish();
          var res = this.$twjsdes.decrypt(response.data.alldata);
          console.log(res)
        }).catch(function (error) {
          this.$Modal.error({
            title: '提示',
            content: '网络连接错误，请检查后重试'
          });
          //console.log(error);
        });
      },
      saveEntry(par) {
        let self = this
        self.entryShow = false
        // console.log(par,'par')
        var strdata = this.$twjsdes.enstr(par);
        self.$http.post(self.$API_URL + '/info/post', {alldata: strdata.alldata}).then(ress => {
          var res = this.$twjsdes.decrypt(ress.data.alldata);
          self.getInfo()
          self.publicInfo()
          // console.log(res,666)
          // self.getDataInfo()
        })
      },
      dateChange(val) {
        let self = this
        self.chooseDate = val
        cookie.set('chooseDate', val)
        self.getInfo()
      },
      goBack() {
        let self = this
        let dw = document.body.clientWidth
        if (dw < 820) {
          self.$emit('dwShow', false)
          self.$router.push({
            path: '/item/staff/',
            query: {
              id: self.$route.query.id,
              phoneDetail: true
            }
          })
        } else {
          self.$emit('dwShow', true)
          localStorage.setItem('middleId', self.$route.query.id)
          self.$router.push('/item/staff/?id=' + self.$route.query.id)
        }
      },
    },
    computed: {
      menuitemClasses: function () {
        return [
          'menu-item',
          this.isCollapsed ? 'collapsed-menu' : ''
        ]
      }
    },
    created() {
      let self = this
      let dw = document.body.clientWidth
      if (dw < 820) {
        self.phoneStyle = true
      } else {
        self.phoneStyle = false
      }
      window.document.title = 'SCS详情';
      this.title = this.$route.query.title
      this.getInfo()
    },
    mounted() {
      this.getData();
    }
  }
</script>

<style lang="less">
  @media screen and (min-width: 850px) and (max-width: 1400px) {
    .staffLeft {
      display: none;
    }

    .staffRight {
      width: 100%;
    }
  }
  #menuCol {
    #menu {
      font-size: 20px;
      background: #3384dd;
      color: #fff;
      padding: 4px 6px;
      border-radius: 50px;
      cursor: pointer;
    }
    .ivu-select-dropdown {
      background: #515151;
      color: #fff;
      opacity: .8;
      .ivu-dropdown-item {
        background: #515151;
        color: #fff;
        opacity: 1;
        text-align: center;
      }
    }
  }
  .quota {
    display: flex;
    flex-direction: column;
    padding: 0;
    .ivu-card-body {
      padding: 0;
      .titleBackH {
        width: 100%;
        height: 104px !important;
        text-align: left;
        border-top-left-radius: 5px;
        border-top-right-radius: 5px;
        color: #fff;
        font-size: 17px;
        padding-left: 21px;
        display: flex;
        flex-direction: column;
        .tb_top {
          font-size: 16px;
          margin-top: 20px;
          margin-bottom: 17px;
        }
        .tb_bottom {
          display: flex;
          flex-direction: row;
          .tbb_left {
            font-size: 26px;
            margin-right: 70px;
            line-height: 26px;
          }
          .tbb_right {
            font-size: 14px;
            line-height: 26px;
          }
        }
      }
      .contentH_detail {
        background: #f9f9f9;
        max-height: 750px;
        overflow-y: auto;
        .conList {
          display: flex;
          flex-direction: column;
          .con_con {
            width: 100%;
            min-height: 44px;
            background: #fff;
            display: flex;
            flex-direction: row;
            border-bottom: 1px solid #e1e1e1;
            cursor: pointer;
            .ccTitle {
              font-size: 13px;
              color: #222222;
              display: flex;
              flex-direction: column;
              justify-content: center;
            }
            .ccText1 {
              font-size: 15px;
              color: #222222;
              padding-top: 10px;
              padding-bottom: 10px;
              padding-right: 20px;
              display: flex;
              flex-direction: column;
              justify-content: center;
            }
            .ccText2 {
              font-size: 14px;
              color: #666666;
              padding-top: 10px;
              padding-bottom: 10px;
              display: flex;
              flex-direction: column;
              justify-content: center;
            }
            .ccText3 {
              font-size: 16px;
              color: #3f8fe0;
              padding-top: 10px;
              padding-bottom: 10px;
              display: flex;
              flex-direction: column;
              justify-content: center;
            }
            .ccText3Null {
              color: #999999;
              padding-top: 10px;
              padding-bottom: 10px;
              display: flex;
              flex-direction: column;
              justify-content: center;
            }
            .ccText4 {
              font-size: 14px;
              color: #ffb11b;
              display: flex;
              flex-direction: column;
              justify-content: center;
              position: relative;
              padding-top: 10px;
              padding-bottom: 10px;
              .ivu-icon {
                line-height: 44px;
                color: #bbbbbb;
                position: absolute;
                right: 20px;
              }
              .ng {
                width: 24px;
                height: 18px;
                line-height: 18px;
                text-align: center;
                border-radius: 3px;
                background: #f15c60;
                color: #fff;
                font-size: 14px;
                margin: auto;
              }
            }
            .textOK {
              color: #56b44a;
            }
            .con_one {
              width: 40%;
              position: relative;
              padding-left: 20px;
              box-sizing: border-box;
            }
            .con_two {
              width: 18%;
              position: relative;
              padding-left: 25px;
              box-sizing: border-box;
            }
            .con_three {
              width: 25%;
              position: relative;
              padding-left: 34px;
              box-sizing: border-box;
            }
            .con_four {
              width: 17%;
              box-sizing: border-box;
              text-align: center;
            }
            .con_one:after, .con_two:after, .con_three:after {
              content: '';
              display: block;
              position: absolute;
              right: -1px;
              top: 25%;
              width: 1px;
              height: 50%;
              background: #e1e1e1;
            }
          }
          .con_con:last-child {
            border-bottom: none;
          }
          .con_title {
            width: 100%;
            height: 60px;
            line-height: 60px;
            background: #f9f9f9;
            box-sizing: border-box;
            border-bottom: 1px solid #e1e1e1;
            display: flex;
            flex-direction: row;
            .title {
              font-size: 16px;
              color: #222222;
              width: 40%;
              position: relative;
              box-sizing: border-box;
              padding-left: 20px;
            }
            .target {
              width: 18%;
              position: relative;
              padding-left: 25px;
              box-sizing: border-box;
              font-size: 14px;
              color: #666666;
            }
            .nowValue {
              width: 25%;
              position: relative;
              padding-left: 34px;
              box-sizing: border-box;
              font-size: 16px;
              color: #3f8fe0;
            }
            .nowValueNull {
              color: #999999;
            }
          }
        }
      }
    }
  }
  .cards {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    .cdLeft {
      display: flex;
      flex-direction: column;
      .cl_top {
        font-size: 16px;
        color: #222222;
      }
      .cl_down {
        font-size: 16px;
        color: #666666;
        margin-top: 10px;
        .cld_color {
          color: #ffb11b;
          margin-left: 10px;
        }
        .cld_color2 {
          color: #56b44a;
          margin-left: 10px;
        }
      }
      .special {
        background: #dc4444;
        color: #fff;
        font-size: 13px;
        padding: 2px 4px;
      }
    }
    .cdright {
      display: flex;
      flex-direction: column;
      justify-content: center;
    }
  }
  .ivu-card-extra {
    top: 11px;
    .conButtons {
      display: flex;
      flex-direction: row;
      .buts {
        padding: 4px 8px;
        background: #f5f5f5;
        font-size: 14px;
        color: #666666;
        margin-right: 10px;
        cursor: pointer;
        border-radius: 3px;
      }
      .chooseButs {
        background: #3f8fe0;
        color: #fff;
      }
    }
  }
  .ivu-card-body {
    background: #f9f9f9;
    .contentDiv {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      flex-wrap: wrap;
      .con {
        width: 32.5%;
        margin-top: 16px;
        display: flex;
        flex-direction: column;
        position: relative;
        cursor: pointer;
        .colorLabel {
          display: block;
          width: 40px;
          height: 20px;
          line-height: 20px;
          text-align: center;
          font-size: 14px;
          color: #fff;
          position: absolute;
          top: 0;
          left: 16px;
        }
        .times {
          display: flex;
          flex-direction: row;
          justify-content: space-between;
          margin-top: 18px;
          margin-bottom: 18px;
          line-height: 18px;
          .timesLeft {
            font-size: 16px;
            color: #666666;
          }
          .timesRight {
            font-size: 18px;
            color: #3f8fe0;
          }
        }
        .conText {
          font-size: 20px;
          color: #222222;
          overflow: hidden;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2;
        }
        .needExplain {
          color: #dc4444;
        }
      }
      .con:nth-child(1), .con:nth-child(2), .con:nth-child(3) {
        margin-top: 0;
      }
      .more {
        width: 100%;
        height: 60px;
        text-align: center;
        line-height: 60px;
        font-size: 18px;
        color: #999999;
        background: #fff;
        margin-top: 16px;
        cursor: pointer;
      }
    }
  }
  @media screen and (min-width: 0px) and (max-width: 850px) {
    #staff1 {
      position: fixed;
      left: 0;
      bottom: 0;
      z-index: 99;
      width: 100%;
      height: 50px !important;
    }

    #staff4 {
      display: none;
    }

    #staffDetail_phone {
      width: 100%;
      #topTitle {
        margin: 8px 0 !important;
      }
      .titleBackH {
        height: 60px !important;
        display: flex;
        flex-direction: row;
        .tb_bottom {
          margin-left: 16px;
          .tbb_left, .tbb_right {
            line-height: 60px;
          }
          .tbb_left {
            margin-right: 16px;
          }
        }
      }
      .contentH_detail {
        padding-bottom: 50px;
        height: 100%;
        /*overflow-y: auto;*/
      }
    }
  }
  /* 手机竖屏 */
  @media screen and (min-width: 0px) and (max-width: 820px) {
    #topTitle {
      padding: 0 16px;
      #menuCol {
        display: flex;
        flex-direction: row;
        justify-content: flex-end;
        .ivu-date-picker {
          width: 7rem;
        }
        .ivu-select-dropdown {
          left: -50px;
        }
      }
    }

    #staffDetail_phone {
      .quota {
        border-radius: 0 !important;
        .titleBackH {
          border-radius: 0 !important;
          height: 87px !important;
          flex-direction: column !important;
          justify-content: center !important;
          padding-right: 21px;
          .tb_top {
            margin-top: 0;
            margin-bottom: 0;
          }
          .tb_bottom {
            display: flex !important;
            flex-direction: row !important;
            justify-content: space-between !important;
            margin-left: 0 !important;
            .tbb_left, .tbb_right {
              line-height: 20px;
            }
          }
        }
        .contentH_detail {
          padding-bottom: 66px !important;
          .conList_Phone {
            display: flex;
            flex-direction: column;
            padding: 0 16px;
            .cp_title {
              width: 100%;
              height: 44px;
              line-height: 44px;
              display: flex;
              flex-direction: row;
              .title {
                color: #222222;
                font-size: 15px;
                margin-right: 15px;
              }
              .target {
                font-size: 14px;
                color: #666666;
                margin-right: 15px;
              }
              .nowValue {
                font-size: 13px;
                color: #3f8fe0;
              }
              .nowValueNull {
                color: #999999;
              }
            }
            .cp_con {
              width: 100%;
              background: #fff;
              border: 1px solid #e5e5e5;
              border-radius: 4px;
              padding: 0 16px;
              display: flex;
              flex-direction: column;
              margin-bottom: 16px;
              .cpc_top {
                display: flex;
                flex-direction: row;
                justify-content: space-between;
                width: 100%;
                min-height: 45px;
                border-bottom: 1px dashed #e5e5e5;
                .cpct_title {
                  display: flex;
                  flex-direction: column;
                  justify-content: center;
                  font-size: 14px;
                  color: #222222;
                  max-width: 70%;
                  padding: 4px 0;
                  display: -webkit-box;
                  -webkit-box-orient: vertical;
                  -webkit-line-clamp: 2;
                  overflow: hidden;
                  box-sizing: border-box;
                }
                .cpct_status {
                  font-size: 14px;
                  position: relative;
                  color: #ffb11b;
                  display: flex;
                  flex-direction: column;
                  justify-content: center;
                  .ng {
                    width: 24px;
                    height: 18px;
                    line-height: 18px;
                    text-align: center;
                    border-radius: 3px;
                    background: #f15c60;
                    color: #fff;
                    font-size: 14px;
                  }
                }
                .textOK {
                  color: #56b44a;
                }
              }
              .cpc_bottom {
                display: flex;
                flex-direction: row;
                flex-wrap: wrap;
                .cpcb_labels {
                  width: 49%;
                  height: 35px;
                  line-height: 35px;
                  padding-left: 13px;
                  box-sizing: border-box;
                  font-size: 14px;
                  .cl_title {
                    font-size: 14px;
                    color: #666666;
                    margin-right: 8px;
                  }
                }
                .cpcb_valueHave {
                  color: #3f8fe0;
                }
                .cpcb_valueNull {
                  color: #999999;
                }
                .cpcb_labels:nth-child(odd) {
                  margin-right: 2%;
                  padding-left: 0;
                  position: relative;
                }
                .cpcb_labels:nth-child(odd):after {
                  content: '';
                  display: block;
                  width: 1px;
                  height: 18px;
                  background: #e0e1e3;
                  position: absolute;
                  right: 0;
                  top: 8.5px;
                }
              }
            }
            .cp_con:last-child {
              margin-bottom: 0;
            }
          }
        }
      }
    }
  }
</style>
